<template>
	<view>
		<u-navbar title="置换兑现详情" :placeholder="true" :autoBack="true"></u-navbar>
		<view class="tab">
			<u-sticky bgColor="#fff">
				<u-tabs :list="tabList" :activeStyle="{
		      color: '#15298C',
		      fontWeight: 500,
					fontsize: '28rpx',
					transform: 'scale(1.05)'
		  }" :inactiveStyle="{
			    color: '#333333',
					fontWeight: 400,
					fontsize: '28rpx',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px;width:120px; height: 34px;" lineWidth=" 25"
					lineColor="#15298C" :current="current" @click="handleTabClick">
				</u-tabs>
			</u-sticky>
		</view>
		<swiper class="swiper" :current="current" @change="swiperChange">
			<swiper-item>
				<view>
					<view class="first-tab" id="first-tab">
						<view v-for="(item,index) in firstTabList" class="first-tab-item" @tap="checkTab" :data-index="index"
							:class="{'first-tab-item-active': currentFirstTabIndex == index}" :key="index">{{item}}</view>
					</view>
					<view style="height: 100%;">
						<view class="details" id="details">
							<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll"
								:scroll-into-view="scrollInto" scroll-with-animation="true">
								<!-- 基本信息 -->
								<view class="details-item" id="details-0">
									<view class="baseInfo">
										<view>
											<text class="_label">状态：</text>
											<text class="_value">
												<text v-if="entity.status == 1">待兑现</text>
												<text v-if="entity.status == 2">待上传凭证</text>
												<text v-if="entity.status == 3">待审核</text>
												<text v-if="entity.status == 4">驳回待提交</text>
												<text v-if="entity.status == 5">审核通过</text>
												<text v-if="entity.status == 6">已作废</text>
											</text>
										</view>
										<view>
											<text class="_label">资料类型：</text>
											<text class="_value">
												<text v-if="entity.dataaudit.dataCategory == -1">换购</text>
												<text v-else-if="entity.dataaudit.dataCategory == -2">增购</text>
												<text v-else-if="entity.dataaudit.dataCategory == -3">报废</text>
												<text v-else>--</text>
											</text>
										</view>
										<view>
											<text class="_label">新车车架号：</text>
											<text class="_value">{{entity.dataaudit.vinNumber|| "--"}}</text>
										</view>
										<view>
											<text class="_label">4S店所在省份：</text>
											<text class="_value">{{entity.dataaudit.province|| "--"}}</text>
										</view>
										<view>
											<text class="_label">4S店所在城市：</text>
											<text class="_value">{{entity.dataaudit.city|| "--"}}</text>
										</view>
										<view>
											<text class="_label">4S店名称：</text>
											<text class="_value">{{entity.dataaudit.ownerName|| "--"}}</text>
										</view>
										<view>
											<text class="_label">ERP编码：</text>
											<text class="_value">{{entity.dataaudit.erpCode|| "--"}}</text>
										</view>
										<view>
											<text class="_label">本店经营品牌：</text>
											<text class="_value">{{entity.dataaudit.manufactureName|| "--"}}</text>
										</view>
										<view>
											<text class="_label">所属大区：</text>
											<text class="_value">{{entity.dataaudit.region|| "--"}}</text>
										</view>
										<view>
											<text class="_label">审核编号：</text>
											<text class="_value">{{entity.dataaudit.auditCode|| "--"}}</text>
										</view>
									</view>
								</view>
								<!-- 车主信息 -->
								<view class="details-item" id="details-1">
									<view class="label">车主信息</view>
									<view class="userInfo">
										<view>
											<text class="_label">车主姓名：</text>
											<text class="_value">{{entity.dataaudit.carOwnerName|| "--"}}</text>
										</view>
										<view>
											<text class="_label">车主身份证号码：</text>
											<text class="_value">{{entity.dataaudit.carOwnerIdNum|| "--"}}</text>
										</view>
										<view>
											<text class="_label">新车车型：</text>
											<text class="_value">{{entity.dataaudit.newVehicleType|| "--"}}</text>
										</view>
										<view>
											<text class="_label">车主身份证：</text>
											<view class="userInfo-image">
												<view v-if="!entity.certificateUrl">--</view>
												<image v-else :src="entity.certificateUrl" @click="handleViewImage(entity.certificateUrl)"
													style="width: 150rpx;height: 150rpx;" mode="">
												</image>
											</view>
										</view>
									</view>
								</view>
								<!-- 主机厂兑现信息 -->
								<view class="details-item" id="details-2">
									<view class="label">主机厂兑现信息</view>
									<view class="redemptionInfo">
										<view>
											<text class="_label">兑现日期：</text>
											<text class="_value">{{entity.exchangeTime|| "--"}}</text>
										</view>
										<view>
											<text class="_label">兑现金额（元）：</text>
											<text class="redemptionInfo-color">{{entity.exchangeAmount|| "--"}}</text>
										</view>
										<view>
											<text class="_label">兑现状态：</text>
											<text class="redemptionInfo">
												<text v-if="entity.exchageStatus == 1">未兑现</text>
												<text v-if="entity.exchageStatus == 2">已兑现</text>
											</text>
										</view>
										<view>
											<text class="_label">反馈截止时间：</text>
											<text class="redemptionInfo-color">{{entity.feedbackDeadlineTime|| "--"}}</text>
										</view>
									</view>
								</view>
								<!-- 兑现凭证 -->
								<view class="details-item" id="details-3">
									<view class="label">兑现凭证</view>
									<view class="voucherInfo">
										<view>
											<text class="_require">*</text>
											<text class="_label">打款日期：</text>
											<text class="_value">{{entity.makePaymentTime|| "--"}}</text>
										</view>
										<view>
											<text class="_require">*</text>
											<text class="_label">打款金额（元）：</text>
											<text class="voucherInfo-color">{{entity.makePaymentAmount|| "--"}}</text>
										</view>
										<view>
											<text class="_require">*</text>
											<text class="_label">打款方式：</text>
											<text class="_value">
												<text v-if="entity.paymentType == 1">银行转账</text>
												<text v-else-if="entity.paymentType == 2">抵扣车款</text>
												<text v-else-if="entity.paymentType == 3">其他</text>
												<text v-else>--</text>
											</text>
										</view>
										<view>
											<text class="_require">*</text>
											<text class="_label">最后一次凭证提交时间：</text>
											<text class="_value">{{entity.lastVoucherTime || "--"}}</text>
										</view>
										<view>
											<text class="_require"></text>
											<text class="_label">备注：</text>
											<text class="_value">{{entity.uploadRemark || "--"}}</text>
										</view>
										<view>
											<text class="_require">*</text>
											<text class="_label">打款凭证（最少上传1张）：</text>
											<view class="voucherInfo-image">
												<view v-if="!entity.voucherUrls">--</view>
												<image v-else v-for="item in entity.voucherUrls.split(',')"
													@click="handleViewImage(entity.voucherUrls)" :src="item"
													style="width: 150rpx;height: 150rpx;margin: 10rpx 15rpx;" mode=""></image>
											</view>
										</view>
										<view>
											<text class="_require">*</text>
											<text class="_label">其他（最少上传10张）：</text>
											<view class="voucherInfo-image">
												<view v-if="!entity.otherUrls">--</view>
												<image v-else v-for="item in entity.otherUrls.split(',') "
													@click="handleViewImage(entity.otherUrls)" :src="item"
													style="width: 150rpx;height: 150rpx;margin: 10rpx 15rpx;" mode=""></image>
											</view>
										</view>
									</view>
								</view>
								<!-- 补充资料 -->
								<view class="details-item" id="details-4">
									<view class="label">补充资料</view>
									<view class="bcInfo">
										<view>
											<text class="_label">补充说明：</text>
											<text class="_value">{{entity.additional|| "--"}}</text>
										</view>
										<view>
											<text class="_label">补充图片（最多上传12张）：</text>
											<view class="bcInfo-image">
												<view v-if="!entity.additionalUrls">--</view>
												<image v-else v-for="item in entity.additionalUrls.split(',')"
													@click="handleViewImage(entity.additionalUrls)" :src="item"
													style="width: 150rpx;height: 150rpx;margin: 10rpx 15rpx;" mode=""></image>
											</view>
										</view>
									</view>
								</view>
								<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
							</scroll-view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="examine-list">
					<scroll-view scroll-y="true" v-if="entity.logList.length !=0" :style="{ height: 'calc(100vh - 88px)'}">
						<view class="examine-list-item" v-for="(item,index) in entity.logList">
							<view class="examine-list-item-1">
								<view class="examine-list-item-1-left">{{item.operator}}</view>
								<view class="examine-list-item-1-right">{{item.operateTime}}</view>
							</view>
							<view class="examine-list-item-2">
								<text class="examine-list-item-label">审核状态：</text>
								<text class="examine-list-item-color-15298C">{{item.auditStatusStr}}</text>
							</view>
							<view class="examine-list-item-3">
								<text class="examine-list-item-label">审核结果：</text>
								<text class="examine-list-item-color-FF1212">{{item.auditResultStr}}</text>
							</view>
							<view class="examine-list-item-4">
								{{item.auditOpinion || "--"}}
							</view>
						</view>
						<view style="height: 50rpx;"></view>
					</scroll-view>
					<view>
						<u-empty v-if="entity.logList.length == 0"> </u-empty>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="upload-btns" v-if="entity.status == 2 || entity.status == 4">
			<view class="btn" v-if="entity.status == 2" @click="handleShowUpload(entity.status)"> 上传凭证 </view>
			<view class="btn" v-if="entity.status == 4" @click="handleShowUpload(entity.status)"> 重新上传凭证 </view>
		</view>

		<u-popup :show="showUpload" :zIndex="998" overlayStyle="z-index:998;" @touchmove.stop.prevent="moveHandle"
			:closeOnClickOverlay="false" :round="25" @close="showUpload = false" @open="showUpload = true">
			<view class="upload">
				<view class="upload-title">{{entity.status == 2 ? '上传凭证' : '重新上传凭证'}}</view>
				<view v-if="entity.status == 2">
					<view>
						<view class="content-title">车主信息</view>
						<view class="content-item-1">
							<view class="content-item-label"><text class="_require">*</text>车主身份证：</view>
							<view class="upload-view">
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
									:maxCount="1">
									<image src="/static/reCharge/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;">
									</image>
								</u-upload>
								</u-upload>
							</view>
						</view>
					</view>
					<view>
						<view class="content-title">兑现凭证</view>
						<view class="content-item-2">
							<view class="flex-between mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款日期：</view>
								<view class="flex-around">
									<view class="placeholder" @tap="showDatetimePicker = true">
										<text v-if="!form.makePaymentTime">选择打款日期</text>
										<text v-else>{{form.makePaymentTime}}</text>
									</view>
									<view class="content-item-value">
										<image src="/static/to-right.png" style="width: 14rpx;height: 26rpx;" mode="">
										</image>
									</view>
								</view>
							</view>
							<view class="flex-between mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款金额（元）：</view>
								<view style="width: 30%;">
									<u--input v-if="showInput" style="width: 100%;" v-model="form.makePaymentAmount"
										@blur="showInput = false" placeholderClass="placeholder" placeholder="请输入" border="none"></u--input>
									<view style="text-align: right;margin-right: 40rpx;color: #666666;" v-else @click="showInput = true">
										{{form.makePaymentAmount}}
									</view>
								</view>
							</view>
							<view class="flex-between mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款方式：</view>
								<view class="flex-around" @tap="showPicker = true">
									<view class="placeholder">
										<text v-if="!form.paymentType">选择打款方式</text>
										<text v-else>{{form.paymentTypeName}}</text>
									</view>
									<view class="content-item-value">
										<image src="/static/to-right.png" style="width: 14rpx;height: 26rpx;" mode="">
										</image>
									</view>
								</view>
							</view>
							<view class=" mt-20">
								<view class="content-item-label"><text class="_require"></text>备注：</view>
								<view style="margin-top: 20rpx;">
									<u--textarea count maxlength="200" v-model="form.uploadRemark" placeholder="请输入"></u--textarea>
								</view>
							</view>
							<view class="mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款凭证（最少上传1张）：</view>
								<view>
									<view class="upload-view">
										<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
											:maxCount="10">
											<image src="/static/reCharge/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;">
											</image>
										</u-upload>
										</u-upload>
									</view>
								</view>
							</view>
							<view class="mt-20">
								<view class="content-item-label"> 其他（最多上传10张）：</view>
								<view>
									<view class="upload-view">
										<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
											:maxCount="10">
											<image src="/static/reCharge/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;">
											</image>
										</u-upload>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="entity.status == 4">
					<view>
						<view class="content-title">兑现凭证</view>
						<view class="content-item-2">
							<view class="flex-between mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款日期：</view>
								<view class="flex-around" @tap="showDatetimePicker = true">
									<view class="placeholder">
										<text v-if="!form.makePaymentTime">选择打款日期</text>
										<text v-else>{{form.makePaymentTime}}</text>
									</view>
									<view class="content-item-value">
										<image src="/static/to-right.png" style="width: 14rpx;height: 26rpx;" mode="">
										</image>
									</view>
								</view>
							</view>
							<view class="flex-between mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款金额（元）：</view>
								<view style="width: 30%;">
									<!-- 	<u--input style="width: 100%;" v-model="form.makePaymentAmount" placeholderClass="placeholder"
										placeholder="请输入" border="none"></u--input> -->
									<u--input v-if="showInput" style="width: 100%;" v-model="form.makePaymentAmount"
										@blur="showInput = false" placeholderClass="placeholder" placeholder="请输入" border="none"></u--input>
									<view style="text-align: right;margin-right: 40rpx;color: #666666;" v-else @click="showInput = true">
										{{form.makePaymentAmount}}
									</view>
								</view>
							</view>
							<view class="flex-between mt-20">
								<view class="content-item-label"><text class="_require">*</text>打款方式：</view>
								<view class="flex-around" @tap="showPicker = true">
									<view class="placeholder">
										<text v-if="!form.paymentType">选择打款方式</text>
										<text v-else>{{form.paymentTypeName}}</text>
									</view>
									<view class="content-item-value">
										<image src="/static/to-right.png" style="width: 14rpx;height: 26rpx;" mode="">
										</image>
									</view>
								</view>
							</view>
							<view class=" mt-20">
								<view class="content-item-label"><text class="_require"></text>备注：</view>
								<view style="margin-top: 20rpx;">
									<u--textarea count maxlength="200" v-model="form.uploadRemark" placeholder="请输入"></u--textarea>
								</view>
							</view>
							<view>
								<view class="content-title">补充资料</view>
							</view>
							<view class="mt-20">
								<view class="content-item-label">补充说明：</view>
								<view style="margin: 10rpx;">
									<u--textarea v-model="form.additional" placeholder="请输入"></u--textarea>
								</view>
							</view>
							<view class="mt-20">
								<view class="content-item-label">补充图片（最多上传12张）：</view>
								<view>
									<view class="upload-view">
										<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
											:maxCount="12">
											<image src="/static/reCharge/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;">
											</image>
										</u-upload>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="upload-footer flex-around">
					<view class="footer-left" @click="showUpload = false">取消</view>
					<view class="footer-right" @click="handleSubmit">提交</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showDatetimePicker" v-model="datetimePicker" :maxDate="maxDate" mode="date"
			@confirm="handleConfirm" @cancel="handleClose"></u-datetime-picker>
		<u-picker :show="showPicker" @cancel="showPicker = false" title="转账类型" :keyName="'label'" :columns="columns"
			@confirm="handlePickerConfirm" ref="uPicker1"></u-picker>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date
	export default {
		data() {
			return {
				maxDate: new Date(`${year}-${month}-${date}`).getTime(),
				datetimePicker: `${year}-${month}-${date}`,
				entity: {
					dataaudit: {},
					logList: [],
				},
				showPicker: false,
				showDatetimePicker: false,
				columns: [
					[{
						label: "银行转账",
						value: 1
					}, {
						label: "抵扣车款",
						value: 2
					}, {
						label: "其他",
						value: 3
					}]
				],
				current: 0,
				tabList: [{
						name: "详情信息",
						check: false
					},
					{
						name: "审核记录",
						check: false
					}
				],
				form: {
					makePaymentTime: "",
					makePaymentAmount: "",
					paymentType: "",
					additional: "",
				},
				showInput: true,
				firstTabList: ["基本信息", "车主信息", "主机厂兑现信息", "兑现凭证", "补充资料"],
				currentFirstTabIndex: 0,
				sHeight: 0,
				scrollInto: '',
				scrollHeight: 400,
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				topArr: [],
				detailsHeight: 0,
				showUpload: false,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				currentStatus: 1,
			}
		},
		onLoad(options) {
			this.getDetails(options.id);
		},
		created() {
			this.getStatusHeight();

		},
		methods: {
			handleShowUpload(status) {
				this.showUpload = true;
				this.form = this.entity;
				if(this.form.uploadRemark){
					this.form.uploadRemark = this.entity.uploadRemark;
				}else{
					this.form.uploadRemark = "";
				}
				if (this.form.paymentType) {
					this.showInput = false;
					this.form = this.entity;
					this.form.paymentTypeName = this.columns[0][this.form.paymentType - 1].label;
				}				
				console.log(this.entity);
			},
			handleViewImage(urls) {
				// this.$u.toast("图片预览");
				if (!urls) {
					return
				}
				uni.previewImage({
					loop: true,
					urls: urls.split(",")
				})
			},
			handleSubmit() {
				if (this.entity.status == 2) { //上传凭证
					let list1 = this.fileList1.map(val => {
						return val.url
					})
					let list2 = this.fileList2.map(val => {
						return val.url
					})
					let list4 = this.fileList4.map(val => {
						return val.url
					})
					if (list1.length == 0) {
						uni.$u.toast("请上传车主身份证");
						return
					}
					if (!this.form.makePaymentTime) {
						uni.$u.toast("请选择打款日期");
						return
					}
					if (!this.form.makePaymentAmount) {
						uni.$u.toast("请输入打款金额");
						return
					}
					if (isNaN(this.form.makePaymentAmount)) {
						uni.$u.toast("请输入正确打款金额");
						return
					}
					if (!this.form.paymentType) {
						uni.$u.toast("请选择打款方式");
						return
					}
					if (list2.length == 0) {
						uni.$u.toast("请上传打款凭证");
						return
					}
					// return
					this.api.uploadVoucher({
						id: this.entity.id,
						certificateUrl: list1.join(","),
						voucherUrls: list2.join(","),
						makePaymentTime: this.form.makePaymentTime + " 00:00:00",
						makePaymentAmount: this.form.makePaymentAmount,
						paymentType: this.form.paymentType,
						uploadRemark: this.form.uploadRemark,
					}).then(res => {
						uni.$u.toast("操作成功");
						uni.$emit('refreshPage');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					})

				} else {
					//重新上传凭证
					if (!this.form.makePaymentTime) {
						uni.$u.toast("请选择打款日期");
						return
					}
					if (!this.form.makePaymentAmount) {
						uni.$u.toast("请输入打款金额");
						return
					}
					if (isNaN(this.form.makePaymentAmount)) {
						uni.$u.toast("请输入正确打款金额");
						return
					}
					if (!this.form.paymentType) {
						uni.$u.toast("请选择打款方式");
						return
					}
					let list3 = this.fileList3.map(val => {
						return val.url
					})
					// return
					this.api.againUploadVoucher({
						id: this.entity.id,
						additionalUrls: this.entity.additionalUrls ?
							this.entity.additionalUrls.split(",").concat(list3 || []).join(",") : list3.length != 0 ?
							list3.join(",") : "",
						additional: this.form.additional,
						makePaymentTime: this.form.makePaymentTime + " 00:00:00",
						makePaymentAmount: this.form.makePaymentAmount,
						paymentType: this.form.paymentType,
						uploadRemark: this.form.uploadRemark,
					}).then(res => {
						uni.$u.toast("操作成功");
						uni.$emit('refreshPage');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					})
				}
			},
			handlePickerConfirm(e) {
				console.log(e);
				this.showPicker = false;
				this.form.paymentTypeName = e.value[0].label;
				this.form.paymentType = e.value[0].value;
			},
			handleConfirm(e) {
				console.log(e);
				this.form.makePaymentTime = this.timestampToDate(e.value);
				this.showDatetimePicker = false;
			},
			handleClose() {
				this.showDatetimePicker = false;
			},
			//格式化时间
			timestampToDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			//查询详情
			getDetails(id) {
				this.api.getexchangeById(id).then(res => {
					console.log(res);
					this.entity = res.data.data;
					this.$nextTick(() => {
						/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
						setTimeout(() => {
							/* 等待滚动区域初始化完成 */
							this.initScrollView().then(() => {
								/* 获取列表数据，你的代码从此处开始 */
								this.getElementTop();
							});
						}, 200);
					});
				})
			},
			moveHandle() {
				return false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.form.proofPayment = ""
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				let regex = /\.([a-zA-Z0-9]+)$/;
				let name = event.file[0].name
				const match = name.match(regex);
				console.log(match);
				if (!['jpg', 'jpeg', 'png'].includes(match[1])) {
					this.$u.toast(`请上传格式为${['jpg','jpeg','png'].join('/')}的图片`);
					return;
				}
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFile(lists[i].url);
					console.log(result);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
				console.log(this.fileList3);
			},
			handleTabClick(e) {
				console.log(e);
				this.current = e.index;
			},
			swiperChange(e) {
				console.log(e);
				this.current = e.detail.current;
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 20 >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.currentFirstTabIndex = index < 0 ? 0 : index;
			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#details');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.details-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					console.log("topArr", topArr);
					this.topArr = topArr;
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last - 20;
					}
				});
			},
			checkTab(e) {
				// this.currentFirstTabIndex = index;
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `details-${index}`;
			},
			// 计算距离顶部安全高度
			getStatusHeight() {
				this.sHeight = uni.getSystemInfoSync().statusBarHeight + 0 + 'px';
				console.log(this.sHeight);
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
		height: 100vh;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-around {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-right {
		display: flex;
		align-items: center;
		justify-content: right;
	}

	.placeholder {
		margin-right: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666 !important;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.upload-com {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1px solid #999999;
		width: 166rpx;
		height: 166rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.upload {
		height: 85vh;
		padding: 20rpx;
		overflow-y: scroll;

		.upload-title {
			margin: 20rpx;
			font-family: PingFangSC-Medium, PingFangSC-Medium;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.upload-footer {
			.footer-left {
				width: 40%;
				margin: 20rpx;
				padding: 30rpx 20rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #808080;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #1A1A1A;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.footer-right {
				width: 40%;
				margin: 20rpx;
				padding: 30rpx 20rpx;
				background: #15298C;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.upload-view {
			margin: 20rpx;
		}

		.upload-text {
			margin-top: 10rpx;
			font-family: PingFangSC-Regular, PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			line-height: 22rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.content-title {
			margin: 20rpx;
			font-family: PingFangSC-Medium, PingFangSC-Medium;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 36rpx;
			font-style: normal;
			text-transform: none;
		}

		.content-item-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.content-item-value {
			margin-right: 20rpx;
		}

		.content-item-1 {}

		.content-item-2 {}
	}

	.swiper {
		height: calc(100vh - 88px);
	}

	.tab {
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.details {
		height: calc(100vh - 100px - 33px);
		overflow: hidden;
	}

	.upload-btns {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.btn {
			text-align: center;
			width: 80%;
			padding: 30rpx 40rpx;
			background: #15298C;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			font-style: normal;
			text-transform: none;
		}
	}

	.first-tab {
		display: flex;
		align-items: center;
		white-space: nowrap;
		/* 禁止文本换行 */
		overflow-x: auto;
		/* 启用水平滚动 */
		-webkit-overflow-scrolling: touch;
		/* 优化iOS滚动体验 */
		margin: 20rpx;

		.first-tab-item {
			padding: 15rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.first-tab-item-active {
			padding: 15rpx;
			background: #15298C;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.label {
		margin: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	._label {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	._value {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	._require {
		margin: 0rpx 5rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FF1212;
		line-height: 32rpx;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.baseInfo {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		line-height: 60rpx;

		.baseInfo-color {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #15298C;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.userInfo {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		line-height: 60rpx;

		.userInfo-image {
			margin: 10rpx 0rpx;
		}
	}

	.redemptionInfo {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		line-height: 60rpx;

		.redemptionInfo-color {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FF1212;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.voucherInfo {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		line-height: 60rpx;

		.voucherInfo-color {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FF1212;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.voucherInfo-image {
			margin: 10rpx 0rpx;
		}
	}

	.bcInfo {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		line-height: 60rpx;

		.bcInfo-image {
			margin: 10rpx 0rpx;
		}
	}

	.examine-list {
		margin: 20rpx;

		.examine-list-item {
			margin: 20rpx 0rpx;
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.examine-list-item-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.examine-list-item-value {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.examine-list-item-color-15298C {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #15298C;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.examine-list-item-color-FF1212 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FF1212;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.examine-list-item-1 {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.examine-list-item-1-left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.examine-list-item-1-right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.examine-list-item-2 {
			margin-top: 10rpx;
		}

		.examine-list-item-3 {
			margin-top: 10rpx;
		}

		.examine-list-item-4 {
			padding: 20rpx;
			margin-top: 10rpx;
			background: #F3F5FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
</style>